<template>
  <div style="padding: 0 20px 20px" v-if="form">
    <div
      style="
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        font-size: 24px;
      "
    >
      <b>{{ $t("name") }}：{{ form.employee.employeeName }}</b>
    </div>
    <el-descriptions :column="2">
      <el-descriptions-item :label="$t('gender')"
        ><dict-tag :options="dict.type.leave_sex" :value="form.employee.sex"
      /></el-descriptions-item>
      <el-descriptions-item :label="$t('mobile_number')">
        {{ form.employee.phone }}</el-descriptions-item
      >
      <el-descriptions-item :label="$t('company_email')">
        {{ form.employee.emailCompany }}</el-descriptions-item
      >
      <el-descriptions-item :label="$t('department')">
        {{ form.employment.departmentName }}</el-descriptions-item
      >
      <slot name="customLabel"></slot>
    </el-descriptions>
  </div>
</template>
<script>
import { getEmployee } from "@/api/custom/employeeList";
import { deptTreeSelect } from "@/api/system/user";
export default {
  name: "Employee",
  dicts: ["leave_sex"],
  components: {},
  props: {
    form: {
      type: Object,
      default() {
        return [];
      },
    },
  },

  data() {
    return {};
  },
  created() {},
  // watch: {
  //   empId: {
  //     handler(val) {
  //       if (val) {
  //         this.getDeptTree();
  //       }
  //     },
  //     immediate: true,
  //   },
  // },
  methods: {
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then((response) => {
        this.deptOptions = response.data;
        this.getData();
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
    },
    /** 查看操作 */
    getData() {
      if (this.form.employment) {
        if (this.form.employment.department) {
          this.form.departmentName = this.findItemById(
            this.deptOptions,
            this.form.employment.department
          ).label;
        }
      } else {
        this.form.departmentName = "-";
      }
    },
    findItemById(list, id) {
      if (!list || !Array.isArray(list) || list.length === 0) {
        return null;
      }
      for (let item of list) {
        console.log(item, id);
        if (item.id == id) {
          return item;
        } else {
          const t = this.findItemById(item.children, id);
          if (t) {
            return t;
          }
        }
      }
      return null;
    },
  },
};
</script>
<style scoped lang="scss">
.header-block {
  padding: 0 20px;
}
</style>
